<template>
  <el-form
    :inline="true"
    :model="ruleForm"
    :rules="rules"
    ref="ruleForm"
    label-width="150px"
    class="demo-ruleForm"
    size="mini"
  >
    <template v-for="(item,index) in formconfig">
      <el-form-item v-if="!item.show" :label="`${item.label} :`" :prop="item.prop" :label-width="item.labelWidth"
                    :style="{width:item.formWidth}">
        <el-input
          v-if="item.type=='text'"
          :disabled="item.disabled"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||''"
          :style="{width:item.width}"
          @focus="callback(item,index,$event)"
          @clear="clear(item,index)"
          clearable
        >
          <i
            v-if="item.icon"
            class="el-input__icon"
            :class="{'el-icon-edit':item.icon}"
            :slot="item.event=='focus'?'prefix':'suffix'"
            @click="handleIconClick(item,index)">
          </i>
        </el-input>
        <!-- <el-button v-if="item.type=='text'&&item.button" @click="buttonEvent">{{item.button}}</el-button> -->

        <el-autocomplete
          v-if="item.type=='autocomplete'"
          :disabled="item.disabled"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||'请输入或选择内容'"
          :style="{width:item.width}"
          clearable
          :fetch-suggestions="querySearch"
          @focus="setAutocompleteArr(item,index)"
          @select="havedSelect"
        ></el-autocomplete>
        <el-input-number
          v-if="item.type=='number'"
          v-model="ruleForm[item.prop]"
          :disabled="item.disabled"
          controls-position="right"
          :step="item.step||1"
          :min="item.min||1"
          :max="item.max||100"
          :style="{width:item.width}"
        ></el-input-number>
        <el-input
          v-if="item.type=='textarea'"
          type="textarea"
          :disabled="item.disabled"
          :rows="item.row"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||''"
          :style="{width:item.width}"
        ></el-input>
        <el-select
          v-if="item.type=='select'"
          :disabled="item.disabled"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||'请选择'"
          :style="{width:item.width}"
          @change="changedata(index,item)"
          filterable
          :multiple="item.multiple"
          :collapse-tags="item.collapseTags"
          clearable
        >
          <el-option
            v-for="item1 in item.list"
            :key="item1.value"
            :label="item1.label"
            :value="item1.value"
            :disabled="item1.disabled"
          ></el-option>
        </el-select>
        <template v-if="item.type=='selectMonth'">
          <el-select
            clearable
            :style="{width:item.width||'148px'}"
            v-model.trim="ruleForm[item.prop][0]"
            :placeholder="item.placeholder||'请选择'"
            size="mini"
            @change="changedata(index,item,'start')"
          >
            <el-option
              v-for="item1 in item.list||formatMonth"
              :key="item1.value"
              :label="item1.name"
              :value="item1.value"
            ></el-option>
          </el-select>
          <label for="" style="fontSize:12px;color:#7B7F83">{{item.go||""}}</label>
          <el-select
            clearable
            :style="{width:item.width||'148px'}"
            v-model.trim="ruleForm[item.prop][1]"
            :placeholder="item.placeholder||'请选择'"
            size="mini"
            @change="changedata(index,item,'end')"
          >
            <el-option
              v-for="item1 in item.list1||formatMonth"
              :key="item1.paraCode"
              :label="item1.paraKey"
              :value="item1.paraCode"
            ></el-option>
          </el-select>
        </template>
        <el-select
          clearable
          v-if="item.type=='selectYear'"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||'请选择'"
          :style="{width:item.width}"
        >
          <el-option
            v-for="item1 in formatYear"
            :key="item1.paraCode"
            :label="item1.paraKey"
            :value="item1.paraCode"
          ></el-option>
        </el-select>
        <el-cascader
          v-if="item.type=='cascader'"
          :options="item.options"
          :props="item.props"
          :disabled="item.disabled"
          v-model="ruleForm[item.prop]"
          clearable
          change-on-select
          :show-all-levels="false"
          :style="{width:item.width}"
        ></el-cascader>
        <el-radio-group
          v-if="item.type=='radio'"
          :disabled="item.disabled"
          v-model="ruleForm[item.prop]"
          :placeholder="item.placeholder||''"
          @change="changedata(index,item)"
        >
          <template v-for="item1 in item.list">
            <el-radio :label="item1.prop">{{item1.label}}</el-radio>
          </template>
        </el-radio-group>
        <el-date-picker
          clearable
          :value-format="'yyyy-MM-dd'"
          :disabled="item.disabled"
          v-if="item.type=='date'"
          v-model="ruleForm[item.prop]"
          align="right"
          :type="item.type"
          placeholder="选择日期"
          :style="{width:item.width}"
        ></el-date-picker>
        <el-date-picker
          clearable
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          :disabled="item.disabled"
          v-if="item.type=='datetime'"
          v-model="ruleForm[item.prop]"
          align="right"
          :type="item.type"
          placeholder="选择日期"
          :style="{width:item.width}"
        ></el-date-picker>
        <el-date-picker
          clearable
          value-format="yyyy-MM-dd"
          :disabled="item.disabled"
          v-if="item.type=='daterange'"
          v-model="ruleForm[item.prop]"
          align="right"
          range-separator="至"
          :type="item.type"
          placeholder="选择日期"
          :style="{width:item.width}"
        ></el-date-picker>
        <el-date-picker
          clearable
          value-format="yyyy-MM-dd HH:mm:ss"
          :disabled="item.disabled"
          v-if="item.type=='datetimerange'"
          v-model="ruleForm[item.prop]"
          align="right"
          range-separator="至"
          :type="item.type"
          placeholder="选择日期"
          :style="{width:item.width}"
        ></el-date-picker>
        <el-date-picker
          clearable
          :disabled="item.disabled"
          v-if="item.type=='year'"
          v-model="ruleForm[item.prop]"
          align="right"
          :type="item.type"
          placeholder="选择年"
          :style="{width:item.width}"
        ></el-date-picker>
        <el-time-picker
          clearable
          :value-format="item.format||'HH:mm:ss'"
          :disabled="item.disabled"
          v-if="item.type=='time'"
          v-model="ruleForm[item.prop]"
          align="right"
          placeholder="选择时间"
          :style="{width:item.width}"
        ></el-time-picker>
        <el-date-picker
          clearable
          :disabled="item.disabled"
          v-if="item.type=='month'"
          v-model="ruleForm[item.prop]"
          align="right"
          :type="item.type"
          placeholder="选择月"
          :style="{width:item.width}"
        ></el-date-picker>

      </el-form-item>
    </template>
  </el-form>
</template>
<script>

export default {
  props: {
    formconfig: { //表单配置数据
      type: Array
    },
    ruleForm: { //表单显示数据
      type: Object
    },
    rules: {  // 表单验证
      type: Object
    }
  },
  mounted() {
    // this.changedata()
    this.initSlectData()
  },
  watch: {},
  data() {
    return {
      // input类型为autocomplete时动态过滤的数组
      restaurants: [],
      formItemIndex: 0,
    }
  },
  computed: {
    formatMonth() {
      return [
        {
          paraCode: "01",
          paraKey: "一月"
        },
        {
          paraCode: "02",
          paraKey: "二月"
        },
        {
          paraCode: "03",
          paraKey: "三月"
        },
        {
          paraCode: "04",
          paraKey: "四月"
        },
        {
          paraCode: "05",
          paraKey: "五月"
        },
        {
          paraCode: "06",
          paraKey: "六月"
        },
        {
          paraCode: "07",
          paraKey: "七月"
        },
        {
          paraCode: "08",
          paraKey: "八月"
        },
        {
          paraCode: "09",
          paraKey: "九月"
        },
        {
          paraCode: "10",
          paraKey: "十月"
        },
        {
          paraCode: "11",
          paraKey: "十一月"
        },
        {
          paraCode: "12",
          paraKey: "十二月"
        }
      ]
    },
    formatYear() {
      var dateList = [];
      for (var i = 0; i < 7; i++) {
        dateList.push(new Date().getFullYear() + i - 5);
      }
      var select = [];
      dateList.forEach(item => {
        var obj = {
          paraCode: item,
          paraKey: item
        };
        select.push(obj);
      });
      return select.reverse();
    }
  },
  methods: {
    setAutocompleteArr(val, index) { // 动态设定数组
      this.restaurants = val.list;
      this.formItemIndex = index;
    },
    havedSelect(val) { // 当选择是下拉中的数据时,可触发的事件
      // 解决从下面选中触发必填验证
      this.$refs.ruleForm.clearValidate(this.formconfig[this.formItemIndex].prop)
      this.$emit('autoCompleteSelected', val)
    },
    querySearch(queryString, cb) { // 输入时的过滤方法
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) { // 自定义过滤
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    initSlectData() {
      for (let i = 0; i < this.formconfig.length; i++) {
        if ((this.formconfig[i].type == "select" || this.formconfig[i].type == "checkbox") && this.formconfig[i].code) {
          /*this.$util.dictory.getItemsByDicKey.call(this,this.formconfig[i].code,(items)=>{
            this.formconfig[i].list=items
          })*/
        }
      }
    },
    handleIconClick(item, i) {
      if (this.formconfig[i].icon == true) {
        if (this.formconfig[i].event == 'focus') {
          this.formconfig[i].event = ''
        } else {
          this.formconfig[i].event = 'focus'
        }
        this.$emit('handleIconClick', {item, i})
      } else {
      }
    },
    clear(item, index) {
      if (item.event == 'focus') {
        for (let p in item) {
          console.log(this.ruleForm[item[p]])
          if (this.ruleForm[item[p]]) {
            this.ruleForm[item[p]] = ''
          }
        }
        this.$emit('clear', {item, index})
      }
    },
    callback(item, index, e) {
      if (item.event == 'focus') {
        e.target.blur()
        this.$emit("callback", {item, index})
      } else {
        return false
      }
    },
    buttonEvent(item) {
      this.$emit('buttonEvent', item)
    },
    changedata(ind, item, state) {
      if ((item.type == "selectMonth" || item.type == "select" || item.type == "radio") && item.event == "change") {
        this.$emit("selectChange", {item, ind, state});
      }
      // 每个条件框数据发生变化都会执行该方法
      // this.formconfig.forEach((item, index) => {
      //     if(item.type=='select'&&item.event=='change'){
      //       this.$emit('selectChange',{item,index})
      //     }
      // });
    },
    submitForm() {
      //表单验证事件 父组件调用
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit("saveForm", this.ruleForm);
        } else {
          // console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() { //重置表格数据
      this.$refs.ruleForm.resetFields();
    },

  }
};
</script>
<style scoped>
>>> .el-input .el-input__inner {
  border-radius: 0px;
}

>>> .el-input {
  width: 100%;
}

>>> .el-select, .el-input--mini {
  /* width:300px;*/
}

>>> .el-input-number--mini {
  /*width:300px;*/
}

>>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
  /* width:300px;*/
  border-radius: 0px;
}

>>> .el-input.is-disabled .el-input__inner {
  background-color: #f5f7fa;
}

.el-form--inline .el-form-item {
  margin-right: 0px;
  width: 50%;
}

i.el-input__icon.el-icon-edit {
  color: rgba(255, 163, 82, 1);
  cursor: pointer;
  font-size: 16px;
}

i.el-input__icon {
  height: auto
}
</style>